<template>
	<view class="user-page">
		<image class="home-bj" :src="imgurl+'/WeChat/pic12.png'" mode="widthFix"></image>
		<view class="activity-name">
			冲吧!小水滴
		</view>
		<!-- <view class="activity-ds">
			2022年趣味体能挑战
		</view> -->
		<view class="authorization" v-if="!isauthorized">
			<image class="bj" :src="imgurl+'/WeChat/pic13.png'" mode="aspectFill"></image>
			<button @click="getUserInfo1" class="auth">微信一键登录</button>
		</view>
		<view class="authorization user-box" v-if="isauthorized">
			<image class="bj" :src="imgurl+'/WeChat/pic13.png'" mode="aspectFill"></image>
			<view class="userimg" v-if="userinfo.avatar">
				<image :src="imgurl+userinfo.avatar" mode=""></image>
			</view>
			<button v-else class="userimg" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				点击获取头像
			</button>

			<view class="username">
				<span class="flex-grow-0">昵称:</span>
				<input type="text" v-model="userinfo.username">
			</view>
			<button class="auth" @click="saveUser">点击保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isauthorized: (uni.getStorageSync('token') ? true : false),
				userinfo: uni.getStorageSync('token'),
				imgurl: this.serverURL
			};
		},
		created() {},
		methods: {
			onChooseavatar(e) {
				let that = this;
				uni.uploadFile({
					url: that.imgurl + '/index/index/uploadImage',
					filePath: e.detail.avatarUrl,
					name: 'file',
					success: res => {
						res = JSON.parse(res.data);
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: (res.code ? 'success' : 'error')
						})
						if (res.code == 1) {
							that.userinfo.avatar = res.url;
							uni.setStorageSync('token',that.userinfo)
						}
					},
					complete: e => {
						uni.hideLoading()
					}
				});
			},
			saveUser() {
				let that = this;
				uni.request({
					url: that.imgurl + "/index/index/setUserDate",
					method: "POST",
					data: this.userinfo,
					success(res) {
						uni.showToast({
							title: res.data.msg,
							icon: (res.data.code ? 'success' : 'error')
						})
						if (res.data.code == 1) {
							uni.setStorageSync('token', res.data.userinfo);
						}
					},
				});
			},
			getUserInfo1() {
				let that = this;
				uni.getUserProfile({
					desc: '登录',
					lang: 'zh_CN',
					success: (el) => {
						uni.login({
							success(e) {
								uni.request({
									url: that.imgurl + "/index/index/mp_auth",
									method: "POST",
									data: {
										iv: el.iv,
										encryptedData: el.encryptedData,
										code: e.code,
										opits: uni.getStorageSync('opits'),
									},
									success(res) {
										uni.showToast({
											title: res.data.msg,
											icon: (res.data.code ? 'success' : 'error')
										})
										if (res.data.code == 1) {
											that.isauthorized = true;
											that.userinfo = res.data.userinfo
											uni.setStorageSync('token', res.data.userinfo);
										}
									},
								});
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.user-page {
		position: relative;
		padding-top: 150rpx;
	}

	.home-bj {
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: -1;
	}

	.activity-name {
		font-size: 79rpx;
		font-weight: bold;
		margin-bottom: 45rpx;
		text-align: center;
	}

	.activity-ds {
		font-size: 33rpx;
		text-align: center;
		font-weight: bold;
	}

	.authorization {
		margin-top: 92rpx;
		width: 680rpx;
		height: 482rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 92rpx auto 0px auto;
		border-radius: 20rpx;
		overflow: hidden;

		.bj {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: -1;
		}

		.auth {
			width: 557rpx;
			height: 108rpx;
			border: 4rpx solid #fff;
			line-height: 108rpx;
			padding: 0px;
			border-radius: 108rpx;
			background-image: linear-gradient(to right, #047449, #00412d);
			font-size: 30rpx;
			font-weight: bold;

		}
	}

	.user-box {
		height: 609rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.userimg {
			width: 189rpx;
			height: 189rpx;
			border-radius: 30rpx;
			overflow: hidden;
			border: 4rpx solid #fff;
			font-size: 28rpx;
			padding: 0px;
			line-height: 189rpx;
		}
	}

	.username {
		display: flex;
		width: 557rpx;
		height: 108rpx;
		border: 4rpx solid #fff;
		line-height: 108rpx;
		padding: 0px;
		border-radius: 108rpx;
		font-weight: bold;
		background: #eeeeef;
		padding: 0px 64rpx;
		box-sizing: border-box;
		margin: 29rpx 0px;
		display: flex;
		align-items: center;

		input {
			background: none;
			padding: 0px;
			height: 108rpx;
			line-height: 108rpx;
			margin-left: 36rpx;

		}
	}
</style>
